<!-- src/views/LoginView.vue -->
<template>
  <div class="auth-container">
    <div class="auth-card">
      <div class="auth-tabs">
        <button
            :class="{ 'active-tab': currentMode === 'login' }"
            @click="switchTo('login')"
        >登录</button>
        <button
            :class="{ 'active-tab': currentMode === 'register' }"
            @click="switchTo('register')"
        >注册</button>
      </div>

      <div class="slide-container">
        <div
            class="form-slide"
            :style="{ transform: formTransform }"
        >
          <!-- 登录表单 -->
          <div class="form-content login-form">
            <h2>用户登录</h2>
            <div class="form-group">
              <label>用户名/邮箱</label>
              <input
                  type="text"
                  v-model="loginForm.username"
                  placeholder="请输入用户名或邮箱"
              >
            </div>
            <div class="form-group">
              <label>密码</label>
              <input
                  type="password"
                  v-model="loginForm.password"
                  placeholder="请输入密码"
              >
            </div>
            <div class="form-group remember-group">
              <div class="remember-me">
                <label class="checkbox-container">
                  <input type="checkbox" v-model="loginForm.remember">
                  <span class="checkmark"></span>
                  记住我
                </label>
              </div>
            </div>
            <div class="form-actions">
              <button class="submit-button" @click="handleLogin">登录</button>
              <button class="link-button" @click.prevent="switchTo('forgot')">忘记密码?</button>
            </div>
            <div class="back-home">
              <button class="link-button" @click="$router.push({ name: 'home' })">
                ← 返回首页
              </button>
            </div>
          </div>

          <!-- 注册表单 -->
          <div class="form-content register-form">
            <h2>用户注册</h2>
            <div class="form-group">
              <label>用户名/邮箱</label>
              <input
                  type="text"
                  v-model="registerForm.identifier"
                  placeholder="请输入用户名或邮箱"
              >
            </div>
            <div class="form-group">
              <label>密码</label>
              <input
                  type="password"
                  v-model="registerForm.password"
                  placeholder="请输入密码"
              >
            </div>
            <div class="form-group">
              <label>确认密码</label>
              <input
                  type="password"
                  v-model="registerForm.confirmPassword"
                  placeholder="请再次输入密码"
              >
            </div>
            <button class="submit-button" @click="handleRegister">注册</button>
          </div>
        </div>
      </div>

      <!-- 忘记密码表单 -->
      <div v-if="currentMode === 'forgot'" class="forgot-form">
        <h2>重置密码</h2>
        <div class="form-group">
          <label>注册邮箱</label>
          <input
              type="email"
              v-model="forgotForm.email"
              placeholder="请输入注册邮箱"
          >
        </div>
        <button class="submit-button" @click="handleForgotPassword">发送重置邮件</button>
        <button class="back-button" @click="switchTo('login')">返回登录</button>
      </div>
    </div>
  </div>
</template>


<script>
import request from "../axios/request";

export default {
  username: 'LoginView',
  data() {
    return {
      currentMode: 'login',
      slideWidth: 0,
      formTransform: 'translateX(0%)',
      loginForm: {
        username: '',
        password: '',
        remember: false
      },
      registerForm: {
        identifier: '',
        password: '',
        confirmPassword: ''
      },
      forgotForm: {
        email: ''
      }
    }
  },
  mounted() {
    this.slideWidth = document.querySelector('.auth-card').offsetWidth;
    window.addEventListener('resize', this.updateSlideWidth);

    // 如果URL参数包含mode，切换到相应模式
    if (this.$route.query.mode === 'register') {
      this.switchTo('register');
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateSlideWidth);
  },
  methods: {
    updateSlideWidth() {
      this.slideWidth = document.querySelector('.auth-card').offsetWidth;
      this.formTransform = this.currentMode === 'login'
          ? 'translateX(0%)'
          : `translateX(-${this.slideWidth}px)`;
    },
    switchTo(mode) {
      if (this.currentMode === mode) return;

      this.formTransform = mode === 'login'
          ? 'translateX(0%)'
          : `translateX(-${this.slideWidth}px)`;

      setTimeout(() => {
        this.currentMode = mode;
      }, 300);
    },
    setMode(mode) {
      this.currentMode = mode;
    },
    async handleLogin() {
      // 表单验证
      if (!this.loginForm.username) {
        alert('请输入用户名或邮箱');
        return;
      }
      if (!this.loginForm.password) {
        alert('请输入密码');
        return;
      }

      try {
        const response = await request.post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        });

        if (response.code === 200) {
          // 存储用户信息和 Token
          const { user, token } = response.data;
          localStorage.setItem('user', JSON.stringify(user));
          localStorage.setItem('token', token);

          // 跳转首页
          this.$router.push({ name: 'FirstIndex' });
        } else {
          alert(response.data.message || '登录失败');
        }
      } catch (error) {
        console.error('登录请求失败:', error);
        alert('登录失败，请检查网络或重试');
      }

    },
    handleRegister() {
      // 表单验证
      if (!this.registerForm.identifier) {
        alert('请输入用户名或邮箱');
        return;
      }

      if (!this.registerForm.password) {
        alert('请输入密码');
        return;
      }

      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      if (this.registerForm.password.length  < 6 || this.registerForm.password.length<6) {
        alert('密码长度小于6位');
        return;
      }
      request.post('/registerNew', {
        username: this.registerForm.identifier,
        password: this.registerForm.password
      }).then(response => {
        this.$message.success('注册成功，请登录',response);
        this.switchTo('login');
          })
          .catch(error => {
            console.error('注册请求失败:', error);
          });
    },
    handleForgotPassword() {
      if (!this.forgotForm.email) {
        alert('请输入注册邮箱');
        return;
      }

      // 把参数拼接到 URL 上作为 query param
      request.post(`/resetPassword?username=${encodeURIComponent(
          this.forgotForm.email)}`)
          .then(response => {
            if (response.code === 200) {
              alert('密码已重置为 123456，请登录');
              this.switchTo('login');
            } else {
              alert(response.message || '重置密码失败');
            }
          })
          .catch(error => {
            console.error('请求失败:', error);
            alert('网络异常，请稍后再试');
          });
    }


  }
}
</script>
<style scoped>
.auth-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.auth-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid #eaeaea;
}

.auth-tabs button {
  flex: 1;
  padding: 1rem;
  font-size: 1.05rem;
  background-color: #f8f9fa;
  color: #666;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.auth-tabs button.active-tab {
  background-color: white;
  color: #667eea;
  font-weight: bold;
  position: relative;
}

.auth-tabs button.active-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #667eea;
}

.slide-container {
  overflow: hidden;
  position: relative;
  min-height: 360px;
}

.form-slide {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.form-content {
  min-width: 100%;
  padding: 2.5rem 2rem;
  flex-shrink: 0;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fdfdfd;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.remember-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.8rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  user-select: none;
  font-size: 0.95rem;
  color: #666;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.checkbox-container:hover .checkmark {
  background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #667eea;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.submit-button {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
}

.back-button {
  width: 100%;
  padding: 0.8rem;
  background-color: white;
  color: #667eea;
  border: 1px solid #667eea;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.back-button:hover {
  background-color: #f3f3ff;
}

.bottom-link {
  text-align: center;
  margin-top: 1rem;
  padding-bottom: 1.5rem;
}

.bottom-link a {
  color: #667eea;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.bottom-link a:hover {
  color: #5a67d8;
  text-decoration: underline;
}

.forgot-form {
  padding: 2rem;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.link-button {
  background: none;
  border: none;
  color: #667eea;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.link-button:hover {
  background-color: #f3f3ff;
  color: #5a67d8;
}
.back-home {
  margin-top: 1rem;
  text-align: center;
}

.link-button {
  background: none;
  border: none;
  color: #3498db;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.link-button:hover {
  background-color: #f3f3ff;
  color: #5a67d8;
}


</style>
